<template>
  <div class="dateContainer">
    <div class="main">
      <el-input-number v-model="year" :min="1970" :max="9999" step-strictly :precision="0" :controls="false" class="inputItem" @focus="changeCurrent('year')"/>-
      <el-input-number v-model="month" :min="1" :max="12" step-strictly :precision="0" :controls="false" class="inputItem" @focus="changeCurrent('month')"/>-
      <el-input-number v-model="day" :min="1" :max="maxDays" step-strictly :precision="0" :controls="false" class="inputItem" @focus="changeCurrent('day')"/>
    </div>
    <div class="control">
      <p class="controlArea" @click="increase"><ArrowUp class="icon"/></p>
      <p class="controlArea" @click="decrease"><ArrowDown class="icon"/></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch, computed} from 'vue'
  import {ArrowUp,ArrowDown} from "@element-plus/icons-vue";
  import dayjs from "dayjs";

  const prop = defineProps({
    modelValue: {
      type: String,
      default: () => dayjs().format('YYYY-MM-DD')
    }
  })
  const emit = defineEmits(['update:modelValue'])

  const year = ref(dayjs().year())
  const month = ref(dayjs().month() + 1)
  const day = ref(dayjs().date())

  watch(() =>[year.value,month.value,day.value], (newValue) => {
    emit('update:modelValue', dayjs(`${newValue[0]}-${newValue[1]}-${newValue[2]}`).format('YYYY-MM-DD'))
  })

  onMounted(() => {
    year.value = dayjs(prop.modelValue).year()
    month.value = dayjs(prop.modelValue).month() + 1
    day.value = dayjs(prop.modelValue).date()
  })

  let current = ref<string>('year')
  const changeCurrent = (val:string) => {
    current.value = val
  }
  // 计算当前月份天数最大值
  const maxDays = computed(() => {
    return dayjs(`${year.value}-${month.value}`).daysInMonth()
  })
  const increase = () => {
    if(current.value === 'year') {
      year.value += 1
    }else if(current.value ==='month') {
      if(month.value === 12) {
        month.value = 1
      }else {
        month.value += 1
      }
    }else if(current.value ==='day') {
      console.log(maxDays)
      if(day.value === maxDays.value) {
        day.value = 1
      }else {
        day.value += 1
      }
    }
  }

  const decrease = () => {
    if(current.value === 'year') {
      year.value -= 1
    }else if(current.value ==='month') {
      month.value -= 1
    }else if(current.value ==='day') {
      day.value -= 1
    }
  }
</script>

<style lang="scss" scoped>
  .dateContainer {
    display: flex;
    height: 28px;
    width: 100%;
    //border: 1px solid #dcdfe6;
    align-items: center;
    .main {
      flex: 1;
      display: flex;
      border: 1px solid #dcdfe6;
      //box-shadow: 0 0 0 1px #dcdfe6 inset;
      .inputItem {
        max-width: 80px;
      }
    }
    .control {
      width: 32px;
      font-size: 13px;
      border: 1px solid #dcdfe6;
      border-left: none;
      .controlArea {
        height: 16px;
        background-color: #f5f7fa;
        &:first-of-type {
          border-bottom: 1px solid #dcdfe6;
        }
        .icon {
          width: 15px;
          margin: 0 auto;
          height: 15px;
          color: #606266;
          cursor: pointer;
        }
      }
    }
    :deep(.el-input__wrapper) {
      box-shadow: none;
    }
  }
</style>
